<template>
  <div class="container">
    <el-card class="content1" shadow="never">
      <el-row :gutter="10" style="text-align: center;padding:5px 0">
        <el-col :span="12">
          <el-button @click="goRelease" class="goReleaseBtn btn">
            新增督办
          </el-button>
        </el-col>
        <el-col :span="12">
          <el-button @click="goDelete" class="goDeleteBtn btn">
            我的督办
          </el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="content2" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-size: 17px;font-weight: bold">我的数据统计</span>
      </div>
      <div style="display: flex;">
        <div class="countDiv">
          <div class="countNum">
            {{ totalSupervise }}
          </div>
          <div class="countText">
            督办总数
          </div>
        </div>
        <div class="countDiv">
          <div class="countNum">
            {{ mySupervision1.doingCount }}
          </div>
          <div class="countText">
            进行中
          </div>
        </div>
        <div class="countDiv">
          <div class="countNum">
            {{ mySupervision1.confirmCount }}
          </div>
          <div class="countText">
            待确认
          </div>
        </div>
        <div class="countDiv">
          <div class="countNum">
            {{ mySupervision1.completedCount }}
          </div>
          <div class="countText">
            已完成
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="content3" shadow="never">
      <div slot="header" class="clearfix">
        <span style="font-size: 17px;font-weight: bold">
          督办数量（{{ totalSupervision }}）
        </span>
      </div>
      <div>
        <div
          class="category"
          v-for="(item, index) in mySupervision"
          :key="index"
        >
          <div class="category1">
            <span class="categoryText1">{{ item.name }} </span>
            <span class="categoryText2">{{ item.count }}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  created() {
    this.getMySupervision();
    this.getMySupervision1();
  },
  data() {
    return {
      mySupervision: [],
      mySupervision1: {}
    };
  },
  computed: {
    totalSupervise() {
      let num = 0;
      num +=
        (this.mySupervision1.completedCount
          ? this.mySupervision1.completedCount
          : 0) +
        (this.mySupervision1.confirmCount
          ? this.mySupervision1.confirmCount
          : 0) +
        (this.mySupervision1.doingCount ? this.mySupervision1.doingCount : 0);
      return num;
    },
    totalSupervision() {
      let num = 0;
      this.mySupervision.map(item => {
        num += item.count ? item.count : 0;
      });
      return num;
    }
  },
  methods: {
    //查询我的督办事项分类统计信息
    getMySupervision() {
      this.API.getMySupervisionMatterCategoryStatistic().then(ret => {
        this.mySupervision = ret.data;
      });
    },
    //查询我的督办事项状态统计信息
    getMySupervision1() {
      this.API.getMySupervisionMatterStatusStatistic().then(ret => {
        this.mySupervision1 = ret.data;
      });
    },
    //跳转
    goRelease() {
      this.$router.push({ name: "superviseDetail" });
    },
    goDelete() {
      this.$router.push({ name: "mySupervise" });
    }
  }
};
</script>
<style scoped lang="less">
.container {
  height: 770px;
  display: flex;
  flex-flow: column;
  float: left;
  width: 22%;
}

.content1 {
  width: 100%;
  height: 100px;
}

.content2 {
  width: 100%;
  height: 160px;
  margin-top: 10px;
}

.content3 {
  width: 100%;
  height: 490px;
  margin-top: 10px;
}

.btn {
  width: 140px;
  height: 48px;
  font-size: 15px;
  border: 0;
  border-radius: 6px;
}

.goReleaseBtn {
  background-color: #0075ff;
  color: #ffffff;
}

.goDeleteBtn {
  background-color: #5fe1e0;
  color: #ffffff;
}

.countDiv {
  flex: 1;
  padding-top: 10px;
}

.countText {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: #999999;
}

.countNum {
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.category {
  float: left;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.category:nth-child(1) {
  margin-top: 0;
}

.category:nth-child(2) {
  margin-top: 0;
}

.category1 {
  width: 143px;
  height: 40px;
  background: rgba(244, 250, 255, 1);
  border-radius: 6px;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  margin: 2px 10px;
}

.categoryText1 {
  line-height: 40px;
  color: #99b4ca;
  /*float: left;*/
  font-size: 15px;
  margin-right: 5px;
}

.categoryText2 {
  line-height: 40px;
  color: #99b4ca;
  /*float: right;*/
  font-size: 14px;
  margin-left: 5px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
